import {Component, Input, ViewChildren} from '@angular/core';
import {NbDialogRef} from "@nebular/theme";

@Component({
  selector: 'common-form-dialog',
  template:`    
    <nb-card style="min-width:800px">
      <nb-card-header>{{title}}</nb-card-header>
      <nb-card-body style="max-height: 600px;overflow: auto;">
        <form class="form-group">
          <div *ngFor="let i of data">
            <input *ngIf="i.type =='input'" nbInput type="text" #inputs [placeholder]="i.title">
            <nb-checkbox *ngIf="i.type == 'checkbox'" status="basic" #inputs>{{i.title}}</nb-checkbox>
            <nb-select *ngIf="i.type == 'select'" [placeholder]="i.title" status="info">
              <nb-option *ngFor="let detail of i.ext" [value]="detail['value']" >{{detail['title']}}</nb-option>
            </nb-select>
          </div>
        </form>
      </nb-card-body>
      <nb-card-footer>
        <button nbButton status="danger" (click)="cancel()">取消</button>
        <button nbButton status="success" (click)="submit()">确定</button>
      </nb-card-footer>
    </nb-card>
  `,
  styles:[
    `
      nb-card {
        transform: translate3d(0, 0, 0);
      }
      button {
        margin-top: 5px;
        margin-bottom: 5px;
        margin-right: 10px;
      }
      input,nb-select {
        margin-bottom: 5px;
        width: 100%;
      }
    `
  ]
})
export class CommonFormDialog{
  @Input("title") title:string;
  @Input("data") data:{title:string,type:string,ext?:any}[];
  @ViewChildren("inputs") vc;
  constructor(protected ref: NbDialogRef<CommonFormDialog>) {
  }

  cancel() {
    this.ref.close();
  }

  submit() {
    const results = this.vc.map(v => v.nativeElement.value);
    this.ref.close(results);
  }
}
